<template>
  <div class="list">
	  <div class="headBox">
		  <div class="headIcon" @click="getBack"><i class="iconfont  icon-youjiantou"></i></div>
		  <div class="headText">
			  <p>歌单</p>
		  </div>
	  </div>
	  <div class="introduceBox">
		  <div class="backgroundflite" :style="{backgroundImage:'url('+coverImg.coverImgUrl+')'}"></div>
		  <div class="introduceImg">
			  <img :src="coverImg.coverImgUrl" alt="">
		  </div>
		  <div class="introduceText">
			  <h2>{{coverImg.name}}</h2>
			  <div class="avatarImg">
				  <img :src="avatarImg.avatarUrl" alt="">
				  <span>{{avatarImg.nickname}}</span>
			  </div>
		  </div>
	  </div>
	  <div class="introduce">
		  <div class="labelBox">
			  标签：
			  <div class="label" v-for="(item,index) in tags">{{item}}</div>
		  </div>
		  <div class="intextBox">
			  简介：{{coverImg.description}}
		  </div>
	  </div>
	  <song :playList="listIdData" ></song>
  </div>
</template>

<script>
	import song from '../components/songlist.vue'
	export default{
		data(){
			return{
				coverImg:[],
				avatarImg:[],
				tags:[],
				idVaule:'',
				songListData:null,
				listIdData:null,//播放列表所有id集合
			}
		},
		methods:{
			getBack(){
				this.$router.go(-1)
			},
		},
		components:{
			song
		},
		created(){
			this.axios({
				url:'/playlist/detail?id=' + this.$route.params.songid
			}).then(res=>{
				this.coverImg = res.data.playlist;
				this.avatarImg = res.data.playlist.creator;
				this.tags = res.data.playlist.tags;
				this.songListData = res.data.playlist.tracks
				this.listIdData = res.data.playlist.tracks.map(e=>e.id);
				// console.log(this.listIdData)
				// console.log(res.data.playlist.tracks)
				// console.log(res.data.playlist.tracks[0].ar[0])
			})
		}
	}
</script>

<style lang="scss" scoped>
	.headBox{
		height: 45px;
		display: flex;
		align-items: center;
		padding-left: 14px;
		.headIcon{
			>i{
				font-size: 27px;
			}
		}
		.headText{
			padding-left: 11px;
			>p:first-child{
				text-align: left;
			}
		}
	}
	.backgroundflite{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 70px;
		background-size: cover;
		filter: blur(50px);
	}
	.introduceBox{
		padding: 30px 10px 30px 15px;
		display: flex;
		position: relative;
		.introduceImg{
			width: 126px;
			height: 126px;
			z-index: 2;
			>img{
				width: 100%;
				height: 100%;
			}
		}
		.introduceText{
			float: left;
			margin-left: 20px;
			z-index: 2;
			>h2{
				padding-top: 1px;
				font-size: 17px;
				line-height: 1.3;
				color: #fefefe;
				height: 44px;
				display: -webkit-box;
				text-align: left;
			}
			.avatarImg{
				margin-top: 30px;
				display: -webkit-box;
				>img{
					width: 30px;
					height: 30px;
					vertical-align: middle;
					margin-right: 5px;
					border-radius: 50%;
				}
				>span{
					color: white;
				}
			}
			
		}
	}
	.introduce{
		    margin: 0 10px 0 15px;
		    padding-top: 10px;
		.labelBox{
			display: flex;
			align-items: center;
			font-size: 12px;
			line-height: 20px;
			margin-bottom: 10px;
			margin-right: -10px;
			color: #666;
			>div{
				border: 1px silver;
				border-radius: 40px;
				margin-right: 10px;
				padding: 1px 8px;
				font-size: 12px;
				border: 1px solid silver;
			}
		}
		.intextBox{
			overflow: hidden;
			// text-overflow: ellipsis;
			// display: -webkit-box;
			// -webkit-line-clamp: 3;
			// -webkit-box-orient: vertical;
			font-size: 14px;
			text-align: initial;
			padding-bottom: 18px;
			line-height: 19px;
		}
	}
</style>